import { Component } from '@angular/core';

import { Directive, HostListener } from '@angular/core';
// 导入了 Angular 2 核心库

@Directive({ selector: 'button[counting]' })
class CountClicks {
  numberOfClicks = 0;
  @HostListener('click', ['$event.target'])
  onClick() {
    console.log("button", "number of clicks:", this.numberOfClicks++);
  }
}

@Component({
  selector: 'my-app', // 字段指定了一个简单的 CSS 选择器，用于指出放置此组件的 HTML 元素
  // // 指定了此组件的模板。 它用一种增强的 HTML 形式写成，用来告诉 Angular 如何渲染此组件的视图。
  template: `<h1>My First Angular 2 App</h1> 
  <button counting>点我看输出会增加</button>
  
  `,
  directives: [CountClicks]
})

export class AppComponent {
  // 打算构建一个真实的应用时，通过添加属性和应用逻辑来扩展这个类。
}
